<template>
  <div>
    <!-- -->
    <search @getValue="getSonValue"></search>
    <div class="content" >
      <div class="selectbox">
        <el-select-v2 v-model="value" :options="myoptions.technology"  @change="changetechnology" placeholder="技术领域" size="large"
          style="width: 170px" />
        <el-select-v2 class="u-m-l-20"v-model="value1" :options="myoptions.publish"  @change="changepublish" placeholder="发布有效期" size="large"
          style="width: 170px" />
        <el-select-v2 class="u-m-l-20" v-model="value2" :options="myoptions.cooperate" placeholder="合作方式" size="large"
          style="width: 170px" />
        <el-select-v2 class="u-m-l-20" v-model="value3" :options="myoptions.demand" placeholder="需求类型" size="large"
          style="width: 170px" />
        <!-- <el-select-v2 v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 100px" />
        <el-select-v2 v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 100px" />
        <el-select-v2 v-model="value" :options="options" placeholder="Please select" size="large"
          style="width: 100px" /> -->
      </div>

      <!-- 主体列表 -->
      <div class="mainconten u-p-tb-30  ">
        <div class="u-m-t-30 pointer mainconten_item" @click="changeitem(item.id)" v-for="(item,index) in demlist" :class="current==index?'active':''">
            <div class="face">
              <div class="faceitem">面议</div>
            </div>
            <img class="u-m-lr-30"  :src="item.demImage.path" alt="">
            <div class="mainconten_item_right">
              <div class="title">
               {{item.demName}}
              </div>
              <div class="hidden-two mainconten_item_right_text ">
                {{item.companyIntr}}
              </div>
              <div class="mainconten_item_bottom">
                <span>{{ item.province }}</span>
                <span> {{item.createTime}}</span>
              </div>
            </div>
        </div>
        <div v-if="demlist==''" style="height: 400px;"  >
          <el-empty class="emptybox"  description="暂无数据~" />
        </div>
      </div>


      <div class="pagniation ">
        <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" 
           layout="prev, pager, next" :total="1000"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import search from '../acl/search.vue';
import myoptions from '../acl/option';
import { ref,onMounted,getCurrentInstance,watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const currentPage3 = ref(1)
const pageSize3 = ref(100)
const current = ref(0)
const value = ref('')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const { proxy } = getCurrentInstance() as any;;

watch([value,value1,value2,value3],()=>{
 
  getdemlist()
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage3.value = val
  getdemlist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value = val
  getdemlist()
}
const demlist:any = ref([])
function getdemlist() {
  proxy.$get('/dem/list', {
    current: currentPage3.value,
    limit:4,
    demType:value.value == '全部' ? '' : value.value,
    lifespan:value1.value == '全部' ? '' : value1.value,
    field:value2.value == '全部' ? '' : value2.value,
    cooperateMode:value3.value == '全部' ? '' : value3.value,
  }).then((res: any) => {
    res.data.records.map(item=>{
      return item.demImage = JSON.parse(item.demImage)
    })
    demlist.value = res.data.records
  })
}

getdemlist()
const getSonValue = (e) => {
  console.log(e);//子组件传入的值
}
const changetechnology = (e:any)=>{
  console.log(e);
  console.log(value.value);
}

const changepublish =(e)=>{
  console.log(e);
  console.log(value1.value);
}
onMounted(()=>{
  
  
})
const changeitem = (index) =>{
  current.value = index
  router.push({
    path: '/product/requiredetail',
    query: {
      id: index
    }
  })
}
</script>
<style lang="scss">
.content {
  width: 1180px;
  margin: 50px auto;
  box-sizing: border-box;
  position: relative;

  .pagniation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }

  .selectbox {
    display: flex;
    align-items: center;
   
  }
  .mainconten {
      width: 1180px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .active{
        box-shadow: 1px 1px 5px 1px $text-color;
        position: relative;
        padding: 30px;
        box-sizing: border-box;
        width: 100%;
      }
      .mainconten_item{
        position: relative;
        padding: 10px 30px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        img{
          width: 160px;
          height: 130px;
        }
        .face{
          position: absolute;
          left: 0px;
          top: 15px;
          .faceitem{
            font-size: 14px;
            color: #fff;
            padding: 5px 10px;
            border-radius: 0 50px 50px 0;
            text-align: center;
            background: linear-gradient(to right,#fea722,#f67001);
          }
        }
        .mainconten_item_right{
          height: 130px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .title{
            font-size: 18px;
          }
          .mainconten_item_right_text{
            color: #999;
            font-size: 14px
          }
          .mainconten_item_bottom{
            color: #999;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center
          }
        }
      }
    }
}
</style>